<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="订单号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入订单号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select
          v-model="queryParams.orderStatus"
          placeholder="请选择订单状态"
          clearable
        >
          <el-option
            v-for="dict in dict.type.order_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入用户名"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户账号" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入用户账号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品专区" prop="productArea">
        <el-select
          v-model="queryParams.productArea"
          placeholder="请选择"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in productAreaList"
            :key="dict.areaId"
            :label="dict.areaName"
            :value="dict.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="payMethod">
        <el-select
          v-model="queryParams.payMethod"
          placeholder="请选择支付方式"
          clearable
        >
          <el-option
            v-for="dict in dict.type.pay_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >订单导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="orderList">
      <el-table-column
        label="订单号"
        align="center"
        prop="orderId"
        width="200"
      />
      <el-table-column
        label="用户名称"
        align="center"
        prop="nickName"
        width="150"
      />
      <el-table-column
        label="用户账号"
        align="center"
        prop="mobile"
        width="150"
      />
      <el-table-column
        label="商品名称"
        align="center"
        prop="productName"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        label="成本价"
        align="center"
        prop="orderCost"
        min-width="150"
      />
      <el-table-column
        label="购买数量"
        align="center"
        prop="buyCount"
        min-width="150"
      />
      <el-table-column
        label="收款平台"
        align="center"
        prop="platform"
        min-width="150"
      />
      <el-table-column label="订单金额" align="center" prop="orderAmount" />
      <el-table-column label="支付金额" align="center" prop="payAmount" />
      <!-- <el-table-column label="支付单号" align="center" prop="payFlowSn" width="180"/> -->
      <el-table-column label="支付方式" align="center" min-width="150">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.pay_type"
            :value="scope.row.payMethod"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="收货人姓名"
        align="center"
        prop="receiveName"
        width="150"
      />
      <el-table-column
        label="收货人电话"
        align="center"
        prop="receiveMobile"
        width="150"
      />
      <el-table-column
        label="收货人地址"
        align="center"
        :show-overflow-tooltip="true"
        width="150"
      >
        <template slot-scope="scope">
          <div>
            {{
              scope.row.receiveProvince +
              scope.row.receiveCity +
              scope.row.receiveArea +
              scope.row.receiveAddress
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="发货方式"
        align="center"
        width="120"
        prop="deliverType"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deliverType == '1'">物流</el-tag>
          <el-tag v-if="scope.row.deliverType == '2'">自提</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="配送方式" align="center" width="170">
        <template slot-scope="scope">
          <div>
            <dict-tag
              :options="dict.type.company_type"
              :value="scope.row.deliverName"
            />
          </div>
          <div>{{ scope.row.deliverNo }}</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.order_status"
            :value="scope.row.orderStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="支付时间"
        align="center"
        prop="payTime"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.payTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发货时间"
        align="center"
        prop="deliverTime"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.deliverTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="确认收货时间"
        align="center"
        prop="finishTime"
        width="100"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.orderStatus != 5">
            {{ parseTime(scope.row.finishTime) }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        align="center"
        prop="comment"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
        fixed="right"
      >
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleDetail(scope.row)"
              >订单详情</el-button
            >
          </div>
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              v-if="scope.row.orderStatus == 2"
              @click="handleDelivery(scope.row)"
              >订单发货</el-button
            >
          </div>
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              v-if="scope.row.orderStatus == 3"
              @click="handleChangeDelivery(scope.row)"
              >发货信息修改</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 订单发货 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :before-close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="订单号" prop="orderId">
          <el-input v-model="form.orderId" disabled />
        </el-form-item>
        <el-form-item label="发货方式" prop="deliverType" required>
          <el-radio-group v-model="form.deliverType">
            <el-radio
              v-for="dict in deliverTypeList"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="物流单号"
          prop="deliverNo"
          required
          v-if="form.deliverType == 1"
        >
          <div style="display: flex">
            <el-input v-model="form.deliverNo" placeholder="请输入物流单号" />
          </div>
        </el-form-item>
        <el-form-item label="物流公司" prop="deliverName" v-if="form.deliverNo">
          <el-select
            v-model="form.deliverName"
            placeholder="请输入物流公司"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.company_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改发货信息 -->
    <el-dialog
      :title="title"
      :visible.sync="openChangeDelivery"
      width="500px"
      append-to-body
      :before-close="close"
    >
      <el-form
        ref="formChangeDelivery"
        :model="formChangeDelivery"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="订单号" prop="orderId">
          <el-input v-model="formChangeDelivery.orderId" disabled />
        </el-form-item>
        <el-form-item label="发货方式" prop="deliverType" required>
          <el-radio-group v-model="formChangeDelivery.deliverType">
            <el-radio
              v-for="dict in deliverTypeList"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="物流单号"
          prop="deliverNo"
          required
          v-if="formChangeDelivery.deliverType == 1"
        >
          <div style="display: flex">
            <el-input
              v-model="formChangeDelivery.deliverNo"
              placeholder="请输入物流单号"
            />
          </div>
        </el-form-item>
        <el-form-item
          label="物流公司"
          prop="deliverName"
          v-if="formChangeDelivery.deliverNo"
        >
          <el-select
            v-model="formChangeDelivery.deliverName"
            placeholder="请输入物流公司"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.company_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormChange">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 订单详情 -->
    <el-dialog
      title="订单详情"
      :visible.sync="openDetail"
      width="700px"
      append-to-body
      :before-close="close"
    >
      <el-form ref="form" :model="formDetail" label-width="120px">
        <el-form-item label="订单号">
          <el-input :value="formDetail.orderId" readonly />
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input :value="formDetail.mobile" readonly />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input :value="formDetail.productName" readonly />
        </el-form-item>
        <el-form-item label="购买数量">
          <el-input :value="formDetail.buyCount" readonly />
        </el-form-item>
        <el-form-item label="支付金额">
          <el-input :value="formDetail.payAmount" readonly />
        </el-form-item>
        <el-form-item label="支付方式">
          <dict-tag
            :options="dict.type.pay_type"
            :value="formDetail.payMethod"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input :value="formDetail.comment" readonly />
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-input :value="formDetail.receiveName" readonly />
        </el-form-item>
        <el-form-item label="收货人电话">
          <el-input v-model="formDetail.receiveMobile" readonly />
        </el-form-item>
        <el-form-item label="收货人地址">
          <div class="flexBox">
            <div>
              {{
                formDetail.receiveProvince +
                formDetail.receiveCity +
                formDetail.receiveArea +
                formDetail.receiveAddress
              }}
            </div>
            <el-button
              style="margin-left: 5px"
              type="primary"
              @click="copy(formDetail)"
              >复制</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="发货时间">
          <el-input :value="parseTime(formDetail.deliverTime)" readonly />
        </el-form-item>
        <el-form-item label="确认收货时间">
          <el-input
            v-if="formDetail.orderStatus != 5"
            :value="parseTime(formDetail.finishTime)"
            readonly
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openDetail = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  orderList,
  deliver,
  expressNameVoList,
  addOrder,
  changeDeliver,
} from "@/api/order/order";
import { Debounce } from "@/utils/tools.js";
import { getToken } from "@/utils/auth";
import { productAreaList } from "@/api/product/productArea";
import store from "@/store";
export default {
  name: "orderList",
  dicts: ["pay_type", "order_status", "company_type"],
  data() {
    return {
      openAdd: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      // 弹出层标题
      title: "订单发货",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        orderId: "",
        orderStatus: "",
      },
      // 表单参数
      formAdd: {},
      // 表单参数
      form: {
        deliverType: null,
        deliverName: null,
      },
      // 表单校验
      rules: {
        deliverNo: [
          { required: true, message: "请输入物流单号", trigger: "blur" },
        ],
        deliverName: [
          { required: true, message: "请输入物流公司名称", trigger: "blur" },
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        deliveryOrNot: [
          { required: true, message: "请选择是否发货", trigger: "change" },
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        deliverType: [
          { required: true, message: "请选择发货方式", trigger: "change" },
        ],
      },
      deliverTypeList: [{ label: "物流", value: 1 }],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/order/batchDeliver",
      },
      formDetail: {},
      openDetail: false,
      roles: true,
      productAreaList: [],
      formChangeDelivery: {},
      openChangeDelivery: false,
    };
  },
  created() {
    let roles = store.getters && store.getters.roles;
    this.roles = roles.indexOf("admin") === -1 ? false : true;
    this.getList();
    this.getProductAreaList();
  },
  methods: {
    // 查询商品区域列表
    getProductAreaList() {
      productAreaList({ pageNo: 1, pageSize: 200 }).then((response) => {
        this.productAreaList = response.data.records;
      });
    },
    // 复制地址
    copy(formDetail) {
      let oInput;
      if (document.getElementById("copyInput")) {
        oInput = document.getElementById("copyInput");
      } else {
        oInput = document.createElement("input");
      }
      oInput.value =
        formDetail.receiveProvince +
        formDetail.receiveCity +
        formDetail.receiveArea +
        formDetail.receiveAddress;
      oInput.id = "copyInput";
      oInput.className = "copy-input";
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message.success("复制成功！");
    },
    // 订单详情
    handleDetail(data) {
      this.formDetail = data;
      this.openDetail = true;
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      if (this.dateRange.length > 0) {
        this.queryParams.beginTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      }
      orderList(this.queryParams).then((response) => {
        this.orderList = response.data;
        this.total = response.extend.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openAdd = false;
      this.openChangeDelivery = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.formChangeDelivery = {};
      this.deliverName = "";
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.beginTime = "";
      this.queryParams.endTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/order/listExport",
        { ...this.queryParams },
        `订单列表${new Date().getTime()}.xlsx`
      );
    },
    /** 订单发货 */
    handleDelivery(row) {
      this.reset();
      this.form = row;
      this.open = true;
    },
    // 发货信息修改
    handleChangeDelivery(row) {
      console.log(row, "--------------------");
      this.reset();
      this.formChangeDelivery = row;
      this.openChangeDelivery = true;
    },
    close() {
      this.reset();
      this.form = {};
      this.open = false;
      this.formDetail = {};
      this.openDetail = false;
      this.openChangeDelivery = false;
      this.formChangeDelivery = {};
    },
    /** 发货 提交按钮 */
    submitForm: Debounce(function (e) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = {
            orderId: this.form.orderId,
            deliverName: this.form.deliverName,
            deliverNo: this.form.deliverNo,
            deliverType: this.form.deliverType,
          };
          deliver(data).then((response) => {
            this.$modal.msgSuccess("操作成功");
            this.open = false;
            this.getList();
          });
        }
      });
    }, 500),
    submitFormChange: Debounce(function (e) {
      this.$refs["formChangeDelivery"].validate((valid) => {
        if (valid) {
          let data = {
            orderId: this.formChangeDelivery.orderId,
            deliverName: this.formChangeDelivery.deliverName,
            deliverNo: this.formChangeDelivery.deliverNo,
            deliverType: this.formChangeDelivery.deliverType,
          };
          changeDeliver(data).then((response) => {
            this.$modal.msgSuccess("操作成功");
            this.openChangeDelivery = false;
            this.getList();
          });
        }
      });
    }, 500),
  },
};
</script>
<style scoped lang="scss">
.flexBox {
  display: flex;
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
</style>
